MediaQuery in Flutter

MediaQuery is an important Flutter widget used to obtain information about the current application window and device environment. It is especially useful for building responsive and adaptive interfaces that work across mobile phones, tablets, desktop windows, foldable devices, and different screen sizes.

Flutter provides specific APIs such as MediaQuery.sizeOf(), MediaQuery.widthOf(), MediaQuery.paddingOf(), MediaQuery.viewInsetsOf(), and MediaQuery.textScalerOf() for accessing individual pieces of media information efficiently. :contentReference[oaicite:0]{index=0}

1. What is MediaQuery?

MediaQuery provides information about the environment in which a Flutter application is currently running. This information can include:

• Application window size


• Window width and height


• Safe-area padding


• Keyboard insets


• Text scaling and accessibility settings


• Platform brightness


• Display features such as folds and hinges


• System gesture areas


• Accessibility-related settings

Flutter's MaterialApp and WidgetsApp normally provide a MediaQuery in the widget tree, allowing descendant widgets to access this information. :contentReference[oaicite:1]{index=1}

2. Why is MediaQuery Important?

A Flutter application can run on devices and windows with very different dimensions. A layout designed for a 360-pixel-wide phone may not look appropriate on a tablet or desktop window.

For example, instead of using a fixed width:

Container(
  width: 350,
  child: Text("Welcome"),
)

you can use the available window size to make the layout responsive:

final width = MediaQuery.sizeOf(context).width;

Container(
  width: width * 0.9,
  child: Text("Welcome"),
)

Flutter's adaptive-design guidance recommends measuring the actual application window rather than assuming that a device type such as "phone" or "tablet" determines the available space. :contentReference[oaicite:2]{index=2}

3. Basic Syntax of MediaQuery

The traditional way of obtaining the complete MediaQueryData object is:

MediaQueryData mediaQuery = MediaQuery.of(context);

You can then access its properties:

double width = mediaQuery.size.width;
double height = mediaQuery.size.height;

However, when you only need a particular property, Flutter recommends using the specific APIs because they create more targeted dependencies and can rebuild the widget more efficiently. :contentReference[oaicite:3]{index=3}

4. MediaQuery.sizeOf()

MediaQuery.sizeOf(context) returns the current application window size in logical pixels.

final Size screenSize = MediaQuery.sizeOf(context);

final double width = screenSize.width;
final double height = screenSize.height;

You can also directly access width and height:

final double width = MediaQuery.sizeOf(context).width;
final double height = MediaQuery.sizeOf(context).height;

Logical pixels are Flutter's device-independent layout units. They help UI dimensions remain reasonably consistent in visual size across devices with different physical pixel densities. :contentReference[oaicite:4]{index=4}

5. MediaQuery.widthOf()

If you only need the window width, you can use:

final double width = MediaQuery.widthOf(context);

This is useful when creating width-based responsive layouts.

Widget build(BuildContext context) {
  final width = MediaQuery.widthOf(context);

  if (width < 600) {
    return const Text("Small Layout");
  }
  return const Text("Large Layout");
}

6. MediaQuery.of(context)

MediaQuery.of(context) gives access to the complete MediaQueryData object.

final mediaQuery = MediaQuery.of(context);

print(mediaQuery.size);
print(mediaQuery.padding);
print(mediaQuery.viewInsets);
print(mediaQuery.platformBrightness);

Use MediaQuery.of() when you genuinely need multiple MediaQuery properties or the complete data object. If you only need one property, a specific method such as sizeOf() or paddingOf() is generally preferred. :contentReference[oaicite:5]{index=5}

7. MediaQueryData

MediaQueryData is the data object containing the media information exposed by MediaQuery.

MediaQueryData data = MediaQuery.of(context);

Common properties include:

These properties are part of MediaQueryData. :contentReference[oaicite:6]{index=6}

8. Getting Screen Width

Screen or application-window width is frequently used to create responsive layouts.

final width = MediaQuery.sizeOf(context).width;

print("Width: $width");

Example:

Widget build(BuildContext context) {
  final width = MediaQuery.sizeOf(context).width;

  return Scaffold(
    body: Center(
      child: Text(
        "Window Width: $width",
        style: const TextStyle(fontSize: 20),
      ),
    ),
  );
}

9. Getting Window Height

You can get the current application-window height using:

final height = MediaQuery.sizeOf(context).height;

Example:

Widget build(BuildContext context) {
  final height = MediaQuery.sizeOf(context).height;

  return Scaffold(
    body: Center(
      child: Text("Window Height: $height"),
    ),
  );
}

10. Creating Responsive Layouts with MediaQuery

One of the most common uses of MediaQuery is changing the UI according to the available width.

Widget build(BuildContext context) {
  final width = MediaQuery.sizeOf(context).width;

  if (width < 600) {
    return const MobileLayout();
  } else if (width < 1024) {
    return const TabletLayout();
  } else {
    return const DesktopLayout();
  }
}

The exact breakpoint values should be chosen according to the layout requirements rather than assuming a device category. Flutter's adaptive guidance emphasizes designing around available space. :contentReference[oaicite:7]{index=7}

11. Responsive Padding

MediaQuery can be used to calculate padding based on the available width.

Widget build(BuildContext context) {
  final width = MediaQuery.sizeOf(context).width;

  final padding = width < 600 ? 16.0 : 40.0;
  return Padding(
    padding: EdgeInsets.all(padding),
    child: const Text("Responsive Content"),
  );
}

12. Responsive Container Width

Instead of giving a container a fixed width, you can use a percentage of the available width.

Widget build(BuildContext context) {
  final width = MediaQuery.sizeOf(context).width;

  return Center(
    child: Container(
      width: width * 0.9,
      padding: const EdgeInsets.all(20),
      child: const Text("Responsive Container"),
    ),
  );
}

For large screens, it is often better to combine responsive sizing with a maximum width so that content does not become excessively wide.

Widget build(BuildContext context) {
  final width = MediaQuery.sizeOf(context).width;

  final contentWidth = width > 900 ? 700.0 : width * 0.9;
  return Center(
    child: SizedBox(
      width: contentWidth,
      child: const Text("Readable Content"),
    ),
  );
}

13. Responsive Columns and Rows

You can switch between a vertical and horizontal layout based on available width.

Widget build(BuildContext context) {
  final width = MediaQuery.widthOf(context);

  if (width < 600) {
    return Column(
      children: const [
        ProfileCard(),
        ProfileDetails(),
      ],
    );
  }
  return Row(
    children: const [
      Expanded(child: ProfileCard()),
      Expanded(child: ProfileDetails()),
    ],
  );
}

14. Complete Responsive Card Example

import 'package:flutter/material.dart';

class ResponsiveCard extends StatelessWidget {
  const ResponsiveCard({super.key});
  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.widthOf(context);
    final cardWidth = width < 600
        ? width * 0.9
        : width < 1000
            ? width * 0.7
            : 600.0;
    return Scaffold(
      appBar: AppBar(
        title: const Text("Responsive Card"),
      ),
      body: Center(
        child: SizedBox(
          width: cardWidth,
          child: Card(
            child: Padding(
              padding: const EdgeInsets.all(20),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: const [
                  Icon(Icons.person, size: 60),
                  SizedBox(height: 16),
                  Text(
                    "User Profile",
                    style: TextStyle(
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  SizedBox(height: 8),
                  Text(
                    "This card adjusts its width according to the available window.",
                    textAlign: TextAlign.center,
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

15. MediaQuery Padding

MediaQuery.padding represents areas that may be partially obscured by system UI, such as a status bar or display cutout.

final padding = MediaQuery.paddingOf(context);

print(padding.top);
print(padding.bottom);
print(padding.left);
print(padding.right);

The specific paddingOf() method is preferred when only padding is required. :contentReference[oaicite:8]{index=8}

16. SafeArea and MediaQuery

SafeArea uses MediaQuery information to keep content away from display cutouts and system UI.

Scaffold(
  body: SafeArea(
    child: Column(
      children: const [
        Text("Safe Content"),
        Text("This content avoids unsafe screen areas."),
      ],
    ),
  ),
)

For most normal application content, wrapping the Scaffold body with SafeArea is a useful starting point. :contentReference[oaicite:9]{index=9}

17. Understanding viewInsets

viewInsets represents areas of the display that are completely obscured, most commonly by the on-screen keyboard.

final bottomInset = MediaQuery.viewInsetsOf(context).bottom;

print("Keyboard inset: $bottomInset");

When the keyboard appears, viewInsets.bottom generally corresponds to the top edge of the keyboard. :contentReference[oaicite:10]{index=10}

18. Keyboard-Aware UI

You can use viewInsets to adjust a custom interface when the keyboard appears.

Widget build(BuildContext context) {
  final keyboardHeight =
      MediaQuery.viewInsetsOf(context).bottom;

  return Padding(
    padding: EdgeInsets.only(bottom: keyboardHeight),
    child: const TextField(
      decoration: InputDecoration(
        hintText: "Enter your name",
      ),
    ),
  );
}

In many standard forms, Flutter's Scaffold and scrolling widgets can already provide much of the required keyboard behavior, so custom inset handling should be used when the UI specifically requires it.

19. MediaQuery.viewPadding

viewPadding represents areas partially obscured by system UI and physical display features such as notches. Unlike padding, it remains independent of temporary obstructions such as the keyboard. :contentReference[oaicite:11]{index=11}

final safePadding = MediaQuery.viewPaddingOf(context);

print("Top: ${safePadding.top}");
print("Bottom: ${safePadding.bottom}");

20. MediaQuery and Text Scaling

MediaQuery also provides information about the user's text-scaling configuration.

final textScaler = MediaQuery.textScalerOf(context);

Modern Flutter uses TextScaler rather than the deprecated textScaleFactor API. :contentReference[oaicite:12]{index=12}

Text should generally be allowed to respond to user accessibility settings instead of forcing a fixed text size.

Text(
  "Accessible Text",
  style: const TextStyle(
    fontSize: 18,
  ),
)

21. MediaQuery and Dark Mode

You can read the platform brightness using:

final brightness =
    MediaQuery.platformBrightnessOf(context);

if (brightness == Brightness.dark) {
  print("Dark mode");
} else {
  print("Light mode");
}

For application-wide theme management, however, Flutter's ThemeData and ThemeMode are generally more appropriate than manually changing every widget based on MediaQuery.

22. Example: Dark and Light UI

Widget build(BuildContext context) {
  final brightness =
      MediaQuery.platformBrightnessOf(context);

  final isDark = brightness == Brightness.dark;
  return Scaffold(
    backgroundColor: isDark
        ? Colors.black
        : Colors.white,
    body: Center(
      child: Text(
        isDark ? "Dark Mode" : "Light Mode",
        style: TextStyle(
          color: isDark
              ? Colors.white
              : Colors.black,
          fontSize: 24,
        ),
      ),
    ),
  );
}

23. Device Pixel Ratio

devicePixelRatio represents the relationship between physical pixels and logical pixels.

final mediaQuery = MediaQuery.of(context);

final ratio = mediaQuery.devicePixelRatio;
print("Device Pixel Ratio: $ratio");

For normal responsive layout decisions, you generally work with logical pixels rather than physical pixel dimensions. :contentReference[oaicite:13]{index=13}

24. MediaQuery and Orientation

MediaQuery exposes orientation information:

final orientation =
    MediaQuery.orientationOf(context);

if (orientation == Orientation.landscape) {
  print("Landscape");
} else {
  print("Portrait");
}

However, Flutter's current adaptive-design guidance recommends avoiding orientation as the primary basis for choosing application layouts. Available window size is generally a better signal because an app can run in resizable windows or multi-window environments. :contentReference[oaicite:14]{index=14}

25. MediaQuery vs LayoutBuilder

Flutter's adaptive documentation recommends MediaQuery.sizeOf when you need the size of the application window and LayoutBuilder when you need the available space of a particular parent. :contentReference[oaicite:15]{index=15}

26. Example: MediaQuery with LayoutBuilder

Widget build(BuildContext context) {
  final windowWidth = MediaQuery.widthOf(context);

  return LayoutBuilder(
    builder: (context, constraints) {
      final localWidth = constraints.maxWidth;
      return Column(
        children: [
          Text("Window: $windowWidth"),
          Text("Local Width: $localWidth"),
        ],
      );
    },
  );
}

27. Responsive Navigation

MediaQuery can help decide whether navigation should be presented as a bottom navigation bar or a larger-screen navigation rail.

Widget build(BuildContext context) {
  final width = MediaQuery.widthOf(context);

  if (width < 600) {
    return const Scaffold(
      body: Center(
        child: Text("Mobile Navigation"),
      ),
    );
  }
  return const Scaffold(
    body: Row(
      children: [
        NavigationRail(
          selectedIndex: 0,
          destinations: [
            NavigationRailDestination(
              icon: Icon(Icons.home),
              label: Text("Home"),
            ),
            NavigationRailDestination(
              icon: Icon(Icons.person),
              label: Text("Profile"),
            ),
          ],
        ),
        Expanded(
          child: Center(
            child: Text("Desktop/Tablet Content"),
          ),
        ),
      ],
    ),
  );
}

A common adaptive pattern is to use compact navigation on smaller windows and larger navigation structures such as a NavigationRail on wider windows. :contentReference[oaicite:16]{index=16}

28. Responsive Grid Using MediaQuery

You can calculate the number of grid columns according to the available width.

Widget build(BuildContext context) {
  final width = MediaQuery.widthOf(context);

  int columns;
  if (width < 600) {
    columns = 2;
  } else if (width < 1000) {
    columns = 3;
  } else {
    columns = 4;
  }
  return GridView.builder(
    padding: const EdgeInsets.all(16),
    gridDelegate:
        SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: columns,
      crossAxisSpacing: 16,
      mainAxisSpacing: 16,
      childAspectRatio: 1,
    ),
    itemCount: 20,
    itemBuilder: (context, index) {
      return Card(
        child: Center(
          child: Text("Item ${index + 1}"),
        ),
      );
    },
  );
}

29. Responsive Dashboard Example

Widget build(BuildContext context) {
  final width = MediaQuery.widthOf(context);

  final crossAxisCount = width < 600
      ? 1
      : width < 1000
          ? 2
          : 4;
  return Scaffold(
    appBar: AppBar(
      title: const Text("Dashboard"),
    ),
    body: GridView.count(
      padding: const EdgeInsets.all(16),
      crossAxisCount: crossAxisCount,
      crossAxisSpacing: 16,
      mainAxisSpacing: 16,
      children: const [
        DashboardCard(
          title: "Users",
          value: "1,250",
        ),
        DashboardCard(
          title: "Orders",
          value: "540",
        ),
        DashboardCard(
          title: "Revenue",
          value: "₹85,000",
        ),
        DashboardCard(
          title: "Pending",
          value: "32",
        ),
      ],
    ),
  );
}
class DashboardCard extends StatelessWidget {
  final String title;
  final String value;
  const DashboardCard({
    super.key,
    required this.title,
    required this.value,
  });
  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(title),
            const SizedBox(height: 8),
            Text(
              value,
              style: const TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

30. Avoid Fixed Screen Assumptions

A common mistake is assuming that the application is always running full-screen on a phone.

For example, this approach can be problematic:

if (isPhone) {
  // Mobile UI
} else {
  // Desktop UI
}

A better approach is to measure the space actually available to the application:

final width = MediaQuery.widthOf(context);

if (width < 600) {
  // Compact UI
} else {
  // Wider UI
}

This is especially important on tablets, desktop windows, ChromeOS, foldable devices, and multi-window environments. :contentReference[oaicite:17]{index=17}

31. Do Not Use MediaQuery for Every Layout Problem

MediaQuery is powerful, but it should not automatically be used for every responsive decision.

For example, if a card only needs to know the width provided by its parent, LayoutBuilder is usually more appropriate.

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth < 400) {
      return const CompactCard();
    }

    return const WideCard();
  },
)

32. MediaQuery and Safe Responsive Forms

MediaQuery can be combined with scrolling and keyboard insets when creating responsive forms.

Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: SingleChildScrollView(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: const [
            TextField(
              decoration: InputDecoration(
                labelText: "Name",
              ),
            ),
            SizedBox(height: 16),
            TextField(
              decoration: InputDecoration(
                labelText: "Email",
              ),
            ),
            SizedBox(height: 16),
            TextField(
              obscureText: true,
              decoration: InputDecoration(
                labelText: "Password",
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

This approach allows the form to work across different screen sizes while the scrolling area helps when the keyboard reduces the visible space.

33. MediaQuery and Maximum Content Width

On large screens, allowing every element to occupy the entire window can create poor readability. A common solution is to use MediaQuery for the outer size and impose a maximum content width.

Widget build(BuildContext context) {
  final width = MediaQuery.widthOf(context);

  return Center(
    child: SizedBox(
      width: width > 800 ? 700 : width * 0.9,
      child: const Column(
        children: [
          Text(
            "Application Content",
            style: TextStyle(fontSize: 28),
          ),
          SizedBox(height: 20),
          Text(
            "Keeping content within a readable width "
            "can improve large-screen layouts.",
          ),
        ],
      ),
    ),
  );
}

Flutter's adaptive best practices specifically caution against simply consuming all available horizontal space on large screens. :contentReference[oaicite:18]{index=18}

34. MediaQuery and Foldable Devices

Modern Flutter applications can encounter display features such as folds and hinges. MediaQueryData includes displayFeatures for information about such features.

final features = MediaQuery.of(context).displayFeatures;

for (final feature in features) {
  print(feature);
}

This allows applications to consider unusual display configurations when required. :contentReference[oaicite:19]{index=19}

35. MediaQuery.maybeOf()

Normally, MediaQuery.of(context) expects a MediaQuery to exist above the current widget. If no MediaQuery is available, it can throw an exception.

The nullable alternative is:

final mediaQuery = MediaQuery.maybeOf(context);

if (mediaQuery != null) {
  print(mediaQuery.size);
}

The maybe APIs return null instead of throwing when no MediaQuery is in scope. :contentReference[oaicite:20]{index=20}

36. MediaQuery.maybeSizeOf()

When you only need the size and MediaQuery may not exist, you can use:

final size = MediaQuery.maybeSizeOf(context);

if (size != null) {
  print(size.width);
}

37. Performance: MediaQuery.of vs Specific Methods

Suppose a widget only needs the window width:

final width = MediaQuery.widthOf(context);

This is generally preferable to:

final width = MediaQuery.of(context).size.width;

The reason is that the specific API establishes a dependency only on the required MediaQuery property, whereas MediaQuery.of() can cause the widget to rebuild when any MediaQueryData field changes. :contentReference[oaicite:21]{index=21}

38. Common Mistakes with MediaQuery

Mistake 1: Using Fixed Width Everywhere

Container(
  width: 500,
)

A fixed width can cause overflow on narrow windows.

Mistake 2: Assuming Device Type

if (device == "tablet") {
  // Tablet UI
}

Use available application-window space instead.

Mistake 3: Using Orientation as the Main Breakpoint

Orientation alone does not tell you how much space your application window actually has. Use MediaQuery.sizeOf() or LayoutBuilder for layout decisions. :contentReference[oaicite:22]{index=22}

Mistake 4: Ignoring Keyboard Insets

Forms can become hidden behind the keyboard if the UI does not properly handle reduced visible space.

Mistake 5: Ignoring Safe Areas

Content may overlap notches, status bars, or other system UI if safe areas are not considered.

Mistake 6: Using MediaQuery Everywhere

For local layout constraints, prefer LayoutBuilder instead of passing global window information through every widget.

39. Best Practices for MediaQuery

• Use MediaQuery.sizeOf(context) when you need application-window size.


• Use MediaQuery.widthOf(context) when you only need width.


• Use MediaQuery.paddingOf(context) for safe-area padding information.


• Use MediaQuery.viewInsetsOf(context) when keyboard or other complete obstructions matter.


• Use MediaQuery.textScalerOf(context) when text scaling information is required.


• Use SafeArea for normal content that should avoid system UI.


• Use LayoutBuilder when a widget needs its parent's local constraints.


• Build layouts around available space rather than device names.


• Avoid unnecessarily locking orientation.


• Test layouts at different window sizes.


• Support accessibility and user text scaling.


• Use maximum widths on large screens when appropriate.


• Break complex responsive interfaces into reusable widgets.

These practices align with Flutter's current adaptive-design recommendations. :contentReference[oaicite:23]{index=23}

40. Complete MediaQuery Example

import 'package:flutter/material.dart';

class MediaQueryDemo extends StatelessWidget {
  const MediaQueryDemo({super.key});
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.sizeOf(context);
    final width = size.width;
    final height = size.height;
    final padding = MediaQuery.paddingOf(context);
    final isCompact = width < 600;
    return Scaffold(
      appBar: AppBar(
        title: const Text("MediaQuery Demo"),
      ),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text("Width: $width"),
              Text("Height: $height"),
              Text("Top Padding: ${padding.top}"),
              Text("Bottom Padding: ${padding.bottom}"),
              const SizedBox(height: 24),
              Expanded(
                child: isCompact
                    ? ListView(
                        children: const [
                          Card(
                            child: ListTile(
                              title: Text("Mobile Card 1"),
                            ),
                          ),
                          Card(
                            child: ListTile(
                              title: Text("Mobile Card 2"),
                            ),
                          ),
                        ],
                      )
                    : GridView.count(
                        crossAxisCount: 3,
                        crossAxisSpacing: 16,
                        mainAxisSpacing: 16,
                        children: const [
                          Card(
                            child: Center(
                              child: Text("Card 1"),
                            ),
                          ),
                          Card(
                            child: Center(
                              child: Text("Card 2"),
                            ),
                          ),
                          Card(
                            child: Center(
                              child: Text("Card 3"),
                            ),
                          ),
                        ],
                      ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

41. Practical Use Cases of MediaQuery

42. MediaQuery Workflow

1. Identify which part of the UI needs to adapt.


2. Determine whether you need global window information or local parent constraints.


3. Use MediaQuery.sizeOf() or another specific MediaQuery API when appropriate.


4. Define meaningful layout breakpoints based on available space.


5. Change the UI structure when necessary.


6. Use flexible widgets such as Expanded, Flexible, Wrap, and scrolling widgets.


7. Use SafeArea for content that must avoid system UI.


8. Test the UI at multiple screen and window sizes.

43. MediaQuery Quick Revision

44. Practice Exercises

1. Create a Flutter page that displays its current window width and height using MediaQuery.


2. Create a responsive layout that shows one column below 600 pixels and two columns above 600 pixels.


3. Create a responsive dashboard with different numbers of cards for different window widths.


4. Create a login form that works correctly when the keyboard appears.


5. Use MediaQuery.paddingOf() to display the safe-area values.


6. Create a responsive navigation system that changes between compact and wide layouts.


7. Create a large-screen layout with a maximum content width.


8. Test your application in portrait, landscape, tablet, desktop, and resizable-window scenarios.

45. Key Takeaways

• MediaQuery provides information about the current application window and media environment.


• MediaQuery.sizeOf() is the preferred API when you need the window size.


• Specific MediaQuery APIs are generally more efficient than reading the complete MediaQueryData when only one property is needed.


• MediaQuery is extremely useful for responsive and adaptive Flutter applications.


• padding, viewPadding, and viewInsets serve different purposes and should not be treated as interchangeable.


• SafeArea uses MediaQuery information to help protect content from system UI and display cutouts.


• Use available window size rather than assuming that a device is a phone, tablet, or desktop.


• Use LayoutBuilder when a component needs local parent constraints.


• Responsive applications should also consider accessibility, keyboard behavior, safe areas, and large-screen usability.

46. Official Flutter Resources

• Flutter MediaQuery API Documentation


• Flutter MediaQueryData API Documentation


• Flutter Adaptive and Responsive Design


• Flutter SafeArea and MediaQuery


• Flutter Adaptive Design Best Practices

47. Flutter Course Resources

For structured Flutter learning and practical training, explore the following resources:

• JustAcademy Flutter Training Course


• Register for Flutter Course Demo

Conclusion

MediaQuery is one of the key tools for creating responsive and adaptive Flutter applications. It allows developers to understand the available application-window size, safe-area information, keyboard obstruction, text scaling, brightness, and other environmental information. For modern Flutter applications, prefer specific APIs such as MediaQuery.sizeOf() and MediaQuery.paddingOf() when only a particular value is needed, and combine MediaQuery with widgets such as LayoutBuilder, SafeArea, Expanded, Flexible, Wrap, and scrolling widgets to create interfaces that adapt naturally to different window sizes. :contentReference[oaicite:24]{index=24}